import { useBoolean, useRequest } from 'ahooks';
import styles from './index.less';
import { getFavoitesFolderListByUserId } from '@/services/article';
import { useParams } from '@umijs/max';
import SpinBox from '@/components/SpinBox';
import { getUerInfo, isMeById } from '@/utils/info';
import { delFavoritesFolders, getFavoiteFolderArticles, getMyFavoitesFoldersList } from '@/services/favorite';
import { useMemo, useRef, useState } from 'react';
import { Breadcrumb, Tag, message } from 'antd';
import EditFavoriteModal from '@/components/EditFavoriteModal';
import MyModal from '@/components/MyModal';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ArticleItem } from '../Article';



export const FavoriteItem = ({ id, name, total, createdTime, isMe, permission, onEdit, onDel, onDetail }) => {
    return <div className={styles.container} onClick={() => {
        if(!getUerInfo()?.id)return
        onDetail()
    }}>
        <div className={styles.left}>
            <div className={styles.title}>
                <span>{name}</span>
                {
                    isMe && <Tag color="blue" style={{ marginLeft: '12px' }}>
                        {permission === 1 ? '公开' : '私有'}
                    </Tag>
                }
            </div>
            <div className={styles.desc}>
                <span>创建时间：{createdTime}</span>
                <span>{total}篇文章</span>
                {
                    isMe && <span className={styles.rightOp}>
                        <a onClick={(e) => {
                            e.stopPropagation()
                            onEdit()
                        }}>编辑</a>
                        <a onClick={(e) => {
                            e.stopPropagation()
                            onDel()
                        }}>删除</a>
                    </span>
                }
            </div>
        </div>
    </div>
}
export default () => {
    const [delOpen, { toggle: toggleDel }] = useBoolean(false)
    const [detailOpen, { toggle: toggleDetail }] = useBoolean(false)
    const { id } = useParams();
    const editInfo = useRef({});
    const delId = useRef({});
    const detailInfo = useRef({});
    const [open, { toggle }] = useBoolean(false);
    const { data: favoriteFolderList = [], loading, run } = useRequest(() => getFavoitesFolderListByUserId(id))
    const list = useMemo(() => {
        return isMeById(id) ? favoriteFolderList : favoriteFolderList.filter(i => i.permission === 1)
    }, [id, favoriteFolderList])
    const isMe = useMemo(() => {
        return isMeById(id)
    }, [id])
    const { run: del, loading: delLoading } = useRequest(delFavoritesFolders, {
        manual: true,
        onSuccess: (res) => {
            message.success('删除成功')
            toggleDel()
            delId.current = {}
            run()
        }
    })
    const { data:articleList,run: getArticle, loading: articleLoading } = useRequest(getFavoiteFolderArticles, {
        manual: true,
    })
    return <>
        {
            isMe && !detailOpen && <div style={{ padding: '16px', borderTop: '1px solid #e4e6eb' }}>
                <a style={{ cursor: 'pointer', lineHeight: "100%" }} onClick={() => {
                    editInfo.current = {};
                    toggle();
                }}>
                    +新建收藏夹
                </a>
            </div>
        }
        {
            detailOpen && <div style={{ padding: '16px 0', borderTop: '1px solid #e4e6eb' }} >
                <Breadcrumb
                items={[
                {
                    title: <span style={{cursor:'pointer'}} onClick={() => {
                        toggleDetail()
                    }}>返回</span>,
                },
                {
                    title: (
                    <>
                        <span>{detailInfo.current.name}</span>
                    </>
                    ),
                },
                ]}
            />
            </div>
        }
        {
            detailOpen ? <SpinBox loading={articleLoading}>
                {
                    !!articleList?.length ?articleList?.map?.((item)=>(<ArticleItem {...item}/>)) :<div style={{display:'flex',justifyContent:'center'}}>暂无文章</div>
                }

            </SpinBox> : <SpinBox loading={loading}>
                {
                    list?.map((item) => <FavoriteItem onDetail={() => {
                        if(detailInfo.current?.id !==item.id){
                            detailInfo.current ={
                                id:item.id,
                                name:item.name
                            }
                            getArticle(item.id)
                        }
                        toggleDetail()
                    }} key={item.id} {...item} isMe={isMe} onDel={() => {
                        delId.current = {
                            id: item.id,
                            name: item.name
                        }
                        toggleDel()
                    }} onEdit={() => {
                        editInfo.current = {
                            id: item.id,
                            permission: item.permission,
                            name: item.name,
                        };
                        toggle();
                    }} />)
                }

            </SpinBox>
        }
        <EditFavoriteModal val={editInfo.current} open={open} close={() => { toggle() }} refresh={run} />
        <MyModal title="删除收藏夹" open={delOpen} width={400} confirmLoading={delLoading} onOk={() => {
            del(delId.current.id)
        }} close={() => {
            toggleDel()
            delId.current = {}
        }}>
            确认删除收藏夹：<a>{delId.current.name}</a>吗？
        </MyModal>
    </>
}